<template>
  <div class="root">
    <el-card>
      <h4>热门歌曲</h4>
      <div class="musicContainer">
        <div v-for="(item,index) in musicInof" :key="index" class="oneitem">
          <div class="imgcontainer">
            <img :src="item.musicPic" @click="detailMsg(item.musicId)" alt="">
          </div>
          <div class="textConten">
            <p>{{item.musicName | namefilter}}</p>
          </div>
        </div>
      </div>
      <div class="paging">
        <ul>
          <li><button @click="chengePage(1)" :class="page.nowPageNumber==1?'disable':''">首页</button></li>
          <li v-for="(item,index) in page.allpageNumber" :key="index"><button @click="chengePage(item)" :class="page.nowPageNumber==item?'active':''">{{item}}</button></li>
          <li><button @click="chengePage(6)" :class="page.nowPageNumber==page.allpageNumber?'disable':''">尾页</button></li>
        </ul>
      </div>
      
    </el-card>
  </div>
</template>

<script>
export default {
  created(){
    this.getallNumber()
    this.getMsg(this.page.nowPageNumber)
  },
  data(){
    return {
      musicInof:[],
      item:0,
      page:{
        allitem:'1',
        allpageNumber:'1',
        onePageItem:'15',
        nowPageNumber:'1'
      }
    }
  },
  methods:{
    async getMsg(msg){
      const result = await this.$http.post('/api/totop', msg)
      this.musicInof = result.data
      this.item = this.musicInof.length
      // console.log(this.item)
      // console.log(this.musicInof)
    },
    detailMsg(index){
      this.$router.push('/detail'+index)
    },
    async getallNumber(){
      // console.log('heiehi')
      const red = await this.$http.get('api/allNumber')
      // console.log(red)
      for (const key in red.data[0]) {
        // console.log(red.data[0][key])
        this.page.allitem = red.data[0][key]
      }
      // 向上取整
      this.page.allpageNumber = Math.ceil(this.page.allitem / this.page.onePageItem)
      // console.log(79/15)
    },
    chengePage(item){
      this.page.nowPageNumber = item
      this.getMsg(item)
    }
  },
  filters:{
    namefilter(el){
      return el.slice(0, 40)+'...'
    }
  }
}
</script>

<style lang="less" scoped>
*{
    margin:0;
    padding: 0;
}
  .root{
    // margin-top: 10vh;
    width: 70vw;
    // height: 50vh;
    // background-color: skyblue;
    margin: 0 auto;
    margin-top: 10px;
    overflow: hidden;
  }
  .musicContainer{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-left: 10px;
      flex-wrap: wrap;

  }
  .oneitem{
    width: 230px;
    height: 300px;
    // background-color: #2ecc71;
    margin-left: 10px;
    margin-top: 10px;
    .imgcontainer{
      width: 230px;
      height: 230px;
      overflow: hidden;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
    //   background-color: skyblue;
      img{
        height: 100%;
        width: 100%;
        transition: .4s all linear;
      }
      img:hover{
        transform: scale(1.1)
      }
      img:hover~.hoverContainer{
        display: block;
      }
    }
  }
  .textConten>p{
      margin-top: 8px;
  }
  .paging{
    ul{
      list-style: none;
      display: flex;
    }
      width: 100%;
    //   height: 50px;
    //   background-color: skyblue;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 5px;
      button{
        width: 100px;
        height: 40px;
        margin-left: 10px;
        font-size: 15px;
        letter-spacing: 2px;
        border: none;
        outline: none;
        cursor: pointer;
        position: relative;
        z-index: 1; 
        border: 1px solid  rgb(110, 238, 108);
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }
  }
  button::before{
    content: '';
    width: 0;
    height:100%;
    background-color: rgb(110, 238, 108);
    position: absolute;
    transform: skewX(45deg);
    transition: 0.3s all linear;
    z-index: -50;

  }
  button:hover{
      color: #ecf0f1;
  }
  button:hover::before{
    width: 200%;
  }
  .active{
    color: #ecf0f1;
    background-color: rgb(110, 238, 108);
  }
  .disable:hover{
    // 鼠标移入时的不允许点击的状态
    cursor:not-allowed;
  }
</style>
